<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手写防抖函数</title>
  </head>
  <body>
    <button id="btn">函数防抖</button>
    <script>
      // 函数防抖：在事件被连续/频繁触发时，只有当事件停止触发超过指定的延迟时间后，目标函数才会被执行一次
      function debounce(func, wait = 500) {
        let timer = null;
        return function (...args) {
          // 每次有新的调用都会清空定时器，重新计时，无论执行多么频繁，最终只执行最后一次
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
            func.apply(this, args);
          }, wait);
        };
      }

      //   const btn = document.getElementById('btn');
      const btn = document.querySelector('#btn');
      console.log('btn', btn);
      btn.onclick = debounce(() => console.log(111), 1000);
    </script>
  </body>
</html>
